<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>全选 : <input type="checkbox" v-model="checkAll" @change="checkallfn"></h1>
        <!-- <h1>{{computefn}}</h1>
        <button @click="addfn">点击+1</button> -->
        <li v-for="(item, index) in list" :key="index">
            <input type="checkbox" v-model="item.checked" @change="checkfn">
            <span>{{item.tit}}</span>
            <span>{{item.price}}</span>
            <span>{{item.count}}</span>
            <button @click="delfn(index)">-</button>
            <button @click="addfn(index)">+</button>
        </li>
        <p>总个数:{{allCount}}</p>
        <p>总价:{{allPrice}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
     var app = new Vue({
        el: '#app',
        data:{
          checkAll:false,
          list:[
              {
                  tit:"篮球",
                  price:100,
                  count:0,
                  checked:false
              },
              {
                  tit:"足球",
                  price:200,
                  count:0,
                  checked:false
              },
              {
                  tit:"乒乓球",
                  price:2,
                  count:0,
                  checked:false
              }
          ]
        },
        computed: {
            allCount () {
                return this.list.reduce((a,b)=>{
                    return a + (b.checked? b.count : 0 )
                },0)
            },
            allPrice () {
                return this.list.reduce((a,b)=>{
                    return a + (b.checked  ? b.count * b .price : 0 )
                },0)
            }
        },
        methods: {
            checkfn() { // 要和全选的checkbox进行关联
                this.checkAll =  this.list.every((item) => {
                    return item.checked
                })
            },
            addfn(index) {
                this.list[index].count ++
            },
            delfn(index) {
                this.list[index].count --
                if ( this.list[index].count < 0 ) {
                    this.list[index].count = 0
                }
            },
            checkallfn () {
                // 让购物车数组里的每一项中的checked这个属性的属性值保持和checkAll一致就可以了
                this.list.forEach((item,index)=>{
                    item.checked = this.checkAll
                })
            }
         },
     })
    </script>
</body>
</html>